<template>
  <view class="fixed-search" :style="{ paddingTop: mtStatusBarHeight + 'rpx' }">
    <view class="suffix-icon" @click="handleArrowClick">
      <u-icon name="arrow-left" color="#000000" size="40rpx" />
    </view>
    <view class="search-input">
      <up-input
        bgColor="#fff"
        :clearabled="true"
        :placeholder="iptPlaceholder"
        shape="circle"
        :customStyle="inputCustomStyle"
        v-model="searchIptVal"
      >
        <template #suffix>
          <u-icon
            name="search"
            color="#000000"
            size="40rpx"
            @click="handleSearchIconClick"
          />
        </template>
      </up-input>
    </view>
  </view>
</template>
<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import { getTitleViewHeight } from "@/utils/utils";
import { onLoad } from "@dcloudio/uni-app";

const props = defineProps({
  searchName: {
    type: String,
    default: "",
  },
  iptPlaceholder: {
    type: String,
    default: "",
  },
});
watch(
  () => props.searchName,
  (newVal) => {
    searchIptVal.value = newVal;
  }
);
const inputCustomStyle = {
  backgroundColor: "#fff",
  paddingLeft: "35rpx",
  paddingRight: "28rpx",
  width: "550rpx",
};

const mtStatusBarHeight = ref(0);

const emit = defineEmits(["goHonour", "handleSearchIconClick", "arrowClick"]);

/**
 * 监听back按钮点击事件
 */
const handleArrowClick = () => {
  emit("arrowClick");
};
const searchIptVal = ref("");

/**
 * 监听搜索按钮点击事件
 */
const handleSearchIconClick = () => {
  emit("handleSearchIconClick", searchIptVal.value);
};

onLoad(() => {
  mtStatusBarHeight.value = getTitleViewHeight();
  // // #ifndef MP-WEIXIN
  // mtStatusBarHeight.value = getTitleViewHeight();
  // // #endif
  // // #ifndef H5 || APP-PLUS
  // mtStatusBarHeight.value = 30;
  // // #endif
  searchIptVal.value = props.searchName;
});
</script>
<style scoped lang=less>
.fixed-search {
  display: flex;
  /* #ifndef MP-WEIXIN */
  justify-content: space-evenly;
  /* #endif */

  align-items: center;
  width: calc(100% - 40rpx);
  height: 65rpx;
  padding: 0 12rpx 0 28rpx;
  .suffix-icon {
    :deep(.u-icon) {
      color: #000000;
    }
  }
  .search-input {
    position: relative;
    /* #ifndef MP-WEIXIN */
    width: 100%;
    /* #endif */

    /* #ifdef MP-WEIXIN */
    width: calc(100% - 250rpx);
    /* #endif */

    .u-input {
      box-shadow: 0 5rpx 13rpx 1rpx rgba(0, 0, 0, 0.05);
    }

    margin-left: 40rpx;
  }
}
</style>
